<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router'
import { showToast } from 'vant';
import { fetchLotteryConfig } from '@/api/withdraw.js'

import { useUserStore } from '@/store';
import { getAssetsFiles } from '@/utils'

const userStore = useUserStore()
const route = useRoute()


async function handleGetLotteryConfig() {
    try {
        const egg = (await fetchLotteryConfig({ device: userStore.uuid, type: 1 })).data.data
        const turntable = (await fetchLotteryConfig({ device: userStore.uuid, type: 2 })).data.data
        userStore.$patch({
            eggCountTotal: egg,
            turntableCountTotal: turntable
        })
    } catch (error) {

    }
}
handleGetLotteryConfig()

const notBrokenEggCount = computed(() => userStore.eggCount === userStore.eggCountTotal)
const eggPath = computed(() => {
    return notBrokenEggCount.value ? route.fullPath : '/egg'
})

const notLotteryCount = computed(() => userStore.turntableCount === userStore.turntableCountTotal)
const wheelPath = computed(() => {
    return notLotteryCount.value ? route.fullPath : '/turntable'
})

function notLotterCount() {
    if (notBrokenEggCount.value || notLotteryCount.value) {
        showToast('We have run out of times for today')
    }
}

const moduleOptions = computed(() => [
    {
        type: 'egg',
        title: "Auspicious Egg",
        desc: 'Earn cash by complete tasks',
        icon: 'game_egg.png',
        fontSizeColor: '#FE577F',
        path: eggPath.value,
        backgroud: 'linear-gradient(to bottom, #F79EA6, #FF547D)'
    },
    {
        type: 'gift',
        title: "Lucky Wheel",
        desc: 'Easily get cash every day',
        icon: 'game_lottery.png',
        fontSizeColor: '#FFA45D',
        path: wheelPath.value,
        backgroud: 'linear-gradient(to bottom, #FFD6A1, #FF9646)'
    }
])
function moduleStyle(module) {
    return { '--color': module.fontSizeColor, '--bg': module.backgroud }
}
</script>

<template>
    <div class="lottery">
        <template v-for="item in moduleOptions">
            <router-link class="lottery-normal" :to="item.path" @click="notLotterCount(item.type)"
                :style="moduleStyle(item)">
                <h1 class="lottery-title">{{ item.title }}</h1>
                <p class="lottery-desc">{{ item.desc }}</p>
                <div class="lottery-btn">Start Earning</div>
                <img class="lottery-icon" :src="getAssetsFiles(item.icon)" :alt="item.type" width="50">
            </router-link>
        </template>
    </div>
</template>

<style scoped lang="scss">
.lottery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3vmin;
    margin-top: 3vmin;

    &-normal {
        position: relative;
        border-radius: 3vmin;
        padding: 3vmin;
        overflow: hidden;
        background: var(--bg);
    }

    &-title {
        font-size: var(--mini-font-size);
        font-weight: 900;
        color: #fff;
    }

    &-desc {
        display: block;
        width: 33vmin;
        height: 8vmin;
        font-size: 12px;
        transform: scale(.8);
        transform-origin: left;
        color: #FBFFBF;
        margin-top: .5vmin;
        margin-bottom: .5vmin;
    }

    &-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25vmin;
        height: 5.5vmin;
        color: var(--color);
        background-color: #ffffff;
        border-radius: 999px;
        font-weight: bold;
        font-size: 3.1vmin;
    }

    &-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 17vmin;

        &[alt=gift] {
            width: 25vmin;
        }
    }

    &_span {
        display: block;
        width: 18.5vmin;
        font-size: 5vmin;
        font-weight: bold;
        font-family: none;
        color: #ffffff;
    }
}
</style>